﻿@model IEnumerable<KRM.Core.vLoadItemDetail>
@{
    ViewBag.Title = "Rearrange Drops";
    Layout = "~/Views/Shared/_PopupLayout.cshtml";
}
<script src="~/js/jquery.tablednd.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#table-1").tableDnD({
            onDragClass: "row-selected",
            onDrop: function (table, row) {
                $("#table-1 tbody tr").each(function (index, value) {
                    $(this).attr("id-number", $(this).attr("data-id") + "," + (index + 1));
                });
            }
        });
    });
    function confirmrearranged() {
        var sort = "";
        $("#table-1 tbody tr").each(function (index, value) {
            if ($(this).attr("id-number") != undefined) {
                sort += $(this).attr("id-number") + "|";
            }
        });
        $.ajax({
            url: "/load/confirmrearranged",
            data: { sort: sort },
            success: (function () {
                window.opener.listloaddetailselected(@ViewBag.Loadid);
                window.close();
            })
        });
    }
</script>
<div style="padding: 10px">
    <div class="alert alert-info alert-dismissable">
        <button type="button" class="close" data-dismiss="alert">×</button>
        <strong>TIP: </strong>Using drag row to rearrange drops.
    </div>
    <div class="row-fluid" style="height: 480px; overflow: auto">
        <table class="table table-bordered table-fix " id="table-1">
            <thead>
                <tr>
                    <th>DropID</th>
                    <th>OrderRef</th>
                    <th>Postcode</th>
                    <th>Address</th>
                    <th>Customer</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model)
                {
                    <tr data-id="@item.DropID" data-number="@item.DropNumber">
                        <td>@item.DropID</td>
                        <td>@item.OrderRef</td>
                        <td>@item.Postcode</td>
                        <td>@item.Address</td>
                        <td>@item.Customer</td>
                    </tr>
                }
            </tbody>
        </table>
    </div>
    <div class="text-right">
        <input type="submit" class="btn btn-primary" value="Confirm rearranged" onclick="confirmrearranged()" />
        <input type="submit" class="btn btn" value="Cancel" onclick="window.close()" />
    </div>
</div>
